<template>
    <div class="check-data" v-loading="loading">
        <h2 class="title">第二步：选取游戏&视频</h2>
        <div class="user-select-box">
            <span>运营账号：</span>
            <el-select v-model="userId" placeholder="请选择运营账号" @change="selectChange">
                <el-option :label="item.userName" :value="item.id" v-for="(item, index) in userList" :key="index"></el-option>
            </el-select>
        </div>
        <div class="table-box">
            <el-table
                ref="multipleTable"
                :data="tableData"
                @select="tableSelectItme"
                @select-all="tableSelect"
                border
                @selection-change="handleSelectionChange"
                style="width: 100%">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    label="游戏信息"
                    width="200">
                    <template slot-scope="scope">
                        <div class="msg-box">
                            <div>
                                <div class="msg-icon">
                                    <uploadOwnImg v-model="scope.row.selectGameInfoVo.gameIcon"/>
                                </div>
                            </div>
                            <div>
                                <span class="msg-title">游戏名称:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.gameName || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏apk:</span>
                                <span class="msg-edit" @click="editApk(scope.row)">编辑</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.apk || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">package:</span>
                                <span class="msg-edit" @click="editPackageName(scope.row)">编辑</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.packageName || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏副标题:</span>
                                <span class="msg-edit" @click="editTitle(scope.row)">编辑</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.gameTitle || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏类型:</span>
                                <!-- <span class="msg-desc">{{scope.row.selectGameInfoVo.gameCategory || '/'}}</span> -->
                                <el-select v-model="scope.row.selectGameInfoVo.gameCategory" multiple placeholder="请选择类型" style="margin-bottom:5px;">
                                    <el-option
                                        v-for="item in gameTypeList"
                                        :key="item.category"
                                        :label="item.name"
                                        :value="item.name">
                                    </el-option>
                                </el-select>
                            </div>
                            <div>
                                <span class="msg-title">游戏tag:</span>
                                <span class="msg-edit" @click="editTag(scope.row)">编辑</span>
                                <span class="msg-desc" v-if="scope.row.selectGameInfoVo.label && scope.row.selectGameInfoVo.label.length">
                                    <span v-for="(item, index) in scope.row.selectGameInfoVo.label" :key="index">{{item}} </span>
                                </span>
                                <span class="msg-desc" v-else>/</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏简介:</span>
                                <span class="msg-edit" @click="editDesc(scope.row)">编辑</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.gameIntroduce || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏大小:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.gameLength | sizeFilter}}</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏厂商:</span>
                                <span class="msg-desc" v-if="scope.row.selectGameInfoVo.gameFirm && scope.row.selectGameInfoVo.gameFirm.length">
                                    <span v-for="(item, index) in scope.row.selectGameInfoVo.gameFirm" :key="index">{{item}} </span>
                                </span>
                                <span class="msg-desc" v-else>/</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏资费:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.gameCharges || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">应用分级:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.applyRating || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏评分:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.gameScore || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">语言:</span>
                                <span class="msg-desc" v-if="scope.row.selectGameInfoVo.gameLanguage && scope.row.selectGameInfoVo.gameLanguage.length">
                                    <span v-for="(item, index) in scope.row.selectGameInfoVo.gameLanguage" :key="index">{{item}} </span>
                                </span>
                                <span class="msg-desc" v-else>/</span>
                            </div>
                            <div>
                                <span class="msg-title">更新时间:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.updateTime || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">系统需求:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.systemRequire || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">版本号:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.version || '/'}}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="type === 'taptap'"
                    label="taptap信息"
                    width="200">
                    <template slot-scope="scope">
                        <div class="msg-box">
                            <div v-if="scope.row.taptapGameInfoVo.gameIcon">
                                <span class="msg-check">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameIcon === scope.row.taptapGameInfoVo.gameIcon"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameIcon = scope.row.taptapGameInfoVo.gameIcon"></span>
                                </span>
                                <div class="msg-icon">
                                    <img :src="scope.row.taptapGameInfoVo.gameIcon" alt="">
                                </div>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.gameName">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameName === scope.row.taptapGameInfoVo.gameName"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameName = scope.row.taptapGameInfoVo.gameName"></span>
                                </span>
                                <span class="msg-title">游戏名称:</span>
                                <span class="msg-desc">{{scope.row.taptapGameInfoVo.gameName || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.apk">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.apk === scope.row.taptapGameInfoVo.apk"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.apk = scope.row.taptapGameInfoVo.apk"></span>
                                </span>
                                <span class="msg-title">游戏apk:</span>
                                <span class="msg-desc">{{scope.row.taptapGameInfoVo.apk || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.packageName">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.packageName === scope.row.taptapGameInfoVo.packageName"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.packageName = scope.row.taptapGameInfoVo.packageName"></span>
                                </span>
                                <span class="msg-title">package:</span>
                                <span class="msg-desc">{{scope.row.taptapGameInfoVo.packageName || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.gameTitle">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameTitle === scope.row.taptapGameInfoVo.gameTitle"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameTitle = scope.row.taptapGameInfoVo.gameTitle"></span>
                                </span>
                                <span class="msg-title">游戏副标题:</span>
                                <span class="msg-desc">{{scope.row.taptapGameInfoVo.gameTitle || '/'}}</span>
                            </div>
                            <div>
                                <!-- <span class="msg-check" v-if="scope.row.taptapGameInfoVo.gameCategory">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameCategory === scope.row.taptapGameInfoVo.gameCategory"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameCategory = scope.row.taptapGameInfoVo.gameCategory"></span>
                                </span> -->
                                <span class="msg-title">游戏类型:</span>
                                <span class="msg-desc">{{scope.row.taptapGameInfoVo.gameCategory || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.label && scope.row.taptapGameInfoVo.label.length">
                                    <i class="el-icon-check is-check" v-if="scope.row.taptapGameInfoVo.label && (scope.row.selectGameInfoVo.label.join() === scope.row.taptapGameInfoVo.label.join())"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.label = scope.row.taptapGameInfoVo.label"></span>
                                </span>
                                <span class="msg-title">游戏tag:</span>
                                <span class="msg-desc" v-if="scope.row.taptapGameInfoVo.label && scope.row.taptapGameInfoVo.label.length">
                                    <span v-for="(item, index) in scope.row.taptapGameInfoVo.label" :key="index">{{item}} </span>
                                </span>
                                <span class="msg-desc" v-else>/</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.gameIntroduce">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameIntroduce === scope.row.taptapGameInfoVo.gameIntroduce"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameIntroduce = scope.row.taptapGameInfoVo.gameIntroduce"></span>
                                </span>
                                <span class="msg-title">游戏简介:</span>
                                <span class="msg-desc">{{scope.row.taptapGameInfoVo.gameIntroduce || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.gameLength">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameLength === scope.row.taptapGameInfoVo.gameLength"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameLength = scope.row.taptapGameInfoVo.gameLength"></span>
                                </span>
                                <span class="msg-title">游戏大小:</span>
                                <span class="msg-desc">{{scope.row.taptapGameInfoVo.gameLength | sizeFilter}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.gameFirm  && scope.row.taptapGameInfoVo.gameFirm.length">
                                    <i class="el-icon-check is-check" v-if="scope.row.taptapGameInfoVo.gameFirm && (scope.row.selectGameInfoVo.gameFirm.join() === scope.row.taptapGameInfoVo.gameFirm.join())"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameFirm = scope.row.taptapGameInfoVo.gameFirm"></span>
                                </span>
                                <span class="msg-title">游戏厂商:</span>
                                <span class="msg-desc" v-if="scope.row.taptapGameInfoVo.gameFirm  && scope.row.taptapGameInfoVo.gameFirm.length">
                                    <span v-for="(item, index) in scope.row.taptapGameInfoVo.gameFirm" :key="index">{{item}} </span>
                                </span>
                                <span class="msg-desc" v-else>/</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.gameCharges">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameCharges === scope.row.taptapGameInfoVo.gameCharges"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameCharges = scope.row.taptapGameInfoVo.gameCharges"></span>
                                </span>
                                <span class="msg-title">游戏资费:</span>
                                <span class="msg-desc">{{scope.row.taptapGameInfoVo.gameCharges || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.applyRating">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.applyRating === scope.row.taptapGameInfoVo.applyRating"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.applyRating = scope.row.taptapGameInfoVo.applyRating"></span>
                                </span>
                                <span class="msg-title">应用分级:</span>
                                <span class="msg-desc">{{scope.row.taptapGameInfoVo.applyRating || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.gameScore">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameScore === scope.row.taptapGameInfoVo.gameScore"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameScore = scope.row.taptapGameInfoVo.gameScore"></span>
                                </span>
                                <span class="msg-title">游戏评分:</span>
                                <span class="msg-desc">{{scope.row.taptapGameInfoVo.gameScore || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.gameLanguage && scope.row.taptapGameInfoVo.gameLanguage.length">
                                    <i class="el-icon-check is-check" v-if="scope.row.taptapGameInfoVo.gameLanguage && (scope.row.selectGameInfoVo.gameLanguage.join() === scope.row.taptapGameInfoVo.gameLanguage.join())"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameLanguage = scope.row.taptapGameInfoVo.gameLanguage"></span>
                                </span>
                                <span class="msg-title">语言:</span>
                                <span class="msg-desc" v-if="scope.row.taptapGameInfoVo.gameLanguage && scope.row.taptapGameInfoVo.gameLanguage.length">
                                    <span v-for="(item, index) in scope.row.taptapGameInfoVo.gameLanguage" :key="index">{{item}} </span>
                                </span>
                                <span class="msg-desc" v-else>/</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.updateTime">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.updateTime === scope.row.taptapGameInfoVo.updateTime"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.updateTime = scope.row.taptapGameInfoVo.updateTime"></span>
                                </span>
                                <span class="msg-title">更新时间:</span>
                                <span class="msg-desc">{{scope.row.taptapGameInfoVo.updateTime || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.systemRequire">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.systemRequire === scope.row.taptapGameInfoVo.systemRequire"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.systemRequire = scope.row.taptapGameInfoVo.systemRequire"></span>
                                </span>
                                <span class="msg-title">系统需求:</span>
                                <span class="msg-desc">{{scope.row.taptapGameInfoVo.systemRequire || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.taptapGameInfoVo.version">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.version === scope.row.taptapGameInfoVo.version"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.version = scope.row.taptapGameInfoVo.version"></span>
                                </span>
                                <span class="msg-title">版本号:</span>
                                <span class="msg-desc">{{scope.row.taptapGameInfoVo.version || '/'}}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="type === 'taptap'"
                    label="应用宝信息"
                    width="200">
                    <template slot-scope="scope">
                        <div class="msg-box">
                            <div v-if="scope.row.applicationTreasureGameInfoVo.gameIcon">
                                <span class="msg-check">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameIcon === scope.row.applicationTreasureGameInfoVo.gameIcon"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameIcon = scope.row.applicationTreasureGameInfoVo.gameIcon"></span>
                                </span>
                                <div class="msg-icon">
                                    <img :src="scope.row.applicationTreasureGameInfoVo.gameIcon" alt="">
                                </div>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.gameName">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameName === scope.row.applicationTreasureGameInfoVo.gameName"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameName = scope.row.applicationTreasureGameInfoVo.gameName"></span>
                                </span>
                                <span class="msg-title">游戏名称:</span>
                                <span class="msg-desc">{{scope.row.applicationTreasureGameInfoVo.gameName || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.apk">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.apk === scope.row.applicationTreasureGameInfoVo.apk"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.apk = scope.row.applicationTreasureGameInfoVo.apk"></span>
                                </span>
                                <span class="msg-title">游戏apk:</span>
                                <span class="msg-desc">{{scope.row.applicationTreasureGameInfoVo.apk || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.packageName">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.packageName === scope.row.applicationTreasureGameInfoVo.packageName"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.packageName = scope.row.applicationTreasureGameInfoVo.packageName"></span>
                                </span>
                                <span class="msg-title">package:</span>
                                <span class="msg-desc">{{scope.row.applicationTreasureGameInfoVo.packageName || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.gameTitle">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameTitle === scope.row.applicationTreasureGameInfoVo.gameTitle"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameTitle = scope.row.applicationTreasureGameInfoVo.gameTitle"></span>
                                </span>
                                <span class="msg-title">游戏副标题:</span>
                                <span class="msg-desc">{{scope.row.applicationTreasureGameInfoVo.gameTitle || '/'}}</span>
                            </div>
                            <div>
                                <!-- <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.gameCategory">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameCategory === scope.row.applicationTreasureGameInfoVo.gameCategory"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameCategory = scope.row.applicationTreasureGameInfoVo.gameCategory"></span>
                                </span> -->
                                <span class="msg-title">游戏类型:</span>
                                <span class="msg-desc">{{scope.row.applicationTreasureGameInfoVo.gameCategory || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.label && scope.row.applicationTreasureGameInfoVo.label.length">
                                    <i class="el-icon-check is-check" v-if="scope.row.applicationTreasureGameInfoVo.label && (scope.row.selectGameInfoVo.label.join() === scope.row.applicationTreasureGameInfoVo.label.join())"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.label = scope.row.applicationTreasureGameInfoVo.label"></span>
                                </span>
                                <span class="msg-title">游戏tag:</span>
                                <span class="msg-desc" v-if="scope.row.applicationTreasureGameInfoVo.label && scope.row.applicationTreasureGameInfoVo.label.length">
                                    <span v-for="(item, index) in scope.row.applicationTreasureGameInfoVo.label" :key="index">{{item}} </span>
                                </span>
                                <span class="msg-desc" v-else>/</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.gameIntroduce">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameIntroduce === scope.row.applicationTreasureGameInfoVo.gameIntroduce"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameIntroduce = scope.row.applicationTreasureGameInfoVo.gameIntroduce"></span>
                                </span>
                                <span class="msg-title">游戏简介:</span>
                                <span class="msg-desc">{{scope.row.applicationTreasureGameInfoVo.gameIntroduce || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.gameLength">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameLength === scope.row.applicationTreasureGameInfoVo.gameLength"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameLength = scope.row.applicationTreasureGameInfoVo.gameLength"></span>
                                </span>
                                <span class="msg-title">游戏大小:</span>
                                <span class="msg-desc">{{scope.row.applicationTreasureGameInfoVo.gameLength | sizeFilter}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.gameFirm && scope.row.applicationTreasureGameInfoVo.gameFirm.length">
                                    <i class="el-icon-check is-check" v-if="scope.row.applicationTreasureGameInfoVo.gameFirm && (scope.row.selectGameInfoVo.gameFirm.join() === scope.row.applicationTreasureGameInfoVo.gameFirm.join())"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameFirm = scope.row.applicationTreasureGameInfoVo.gameFirm"></span>
                                </span>
                                <span class="msg-title">游戏厂商:</span>
                                <span class="msg-desc" v-if="scope.row.applicationTreasureGameInfoVo.gameFirm && scope.row.applicationTreasureGameInfoVo.gameFirm.length">
                                    <span v-for="(item, index) in scope.row.applicationTreasureGameInfoVo.gameFirm" :key="index">{{item}} </span>
                                </span>
                                <span class="msg-desc" v-else>/</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.gameCharges">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameCharges === scope.row.applicationTreasureGameInfoVo.gameCharges"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameCharges = scope.row.applicationTreasureGameInfoVo.gameCharges"></span>
                                </span>
                                <span class="msg-title">游戏资费:</span>
                                <span class="msg-desc">{{scope.row.applicationTreasureGameInfoVo.gameCharges || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.applyRating">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.applyRating === scope.row.applicationTreasureGameInfoVo.applyRating"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.applyRating = scope.row.applicationTreasureGameInfoVo.applyRating"></span>
                                </span>
                                <span class="msg-title">应用分级:</span>
                                <span class="msg-desc">{{scope.row.applicationTreasureGameInfoVo.applyRating || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.gameScore">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.gameScore === scope.row.applicationTreasureGameInfoVo.gameScore"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameScore = scope.row.applicationTreasureGameInfoVo.gameScore"></span>
                                </span>
                                <span class="msg-title">游戏评分:</span>
                                <span class="msg-desc">{{scope.row.applicationTreasureGameInfoVo.gameScore || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.gameLanguage && scope.row.applicationTreasureGameInfoVo.gameLanguage.length">
                                    <i class="el-icon-check is-check" v-if="scope.row.applicationTreasureGameInfoVo.gameLanguage && (scope.row.selectGameInfoVo.gameLanguage.join() === scope.row.applicationTreasureGameInfoVo.gameLanguage.join())"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.gameLanguage = scope.row.applicationTreasureGameInfoVo.gameLanguage"></span>
                                </span>
                                <span class="msg-title">语言:</span>
                                <span class="msg-desc" v-if="scope.row.applicationTreasureGameInfoVo.gameLanguage && scope.row.applicationTreasureGameInfoVo.gameLanguage.length">
                                    <span v-for="(item, index) in scope.row.applicationTreasureGameInfoVo.gameLanguage" :key="index">{{item}} </span>
                                </span>
                                <span class="msg-desc" v-else>/</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.updateTime">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.updateTime === scope.row.applicationTreasureGameInfoVo.updateTime"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.updateTime = scope.row.applicationTreasureGameInfoVo.updateTime"></span>
                                </span>
                                <span class="msg-title">更新时间:</span>
                                <span class="msg-desc">{{scope.row.applicationTreasureGameInfoVo.updateTime || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.systemRequire">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.systemRequire === scope.row.applicationTreasureGameInfoVo.systemRequire"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.systemRequire = scope.row.applicationTreasureGameInfoVo.systemRequire"></span>
                                </span>
                                <span class="msg-title">系统需求:</span>
                                <span class="msg-desc">{{scope.row.applicationTreasureGameInfoVo.systemRequire || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-check" v-if="scope.row.applicationTreasureGameInfoVo.version">
                                    <i class="el-icon-check is-check" v-if="scope.row.selectGameInfoVo.version === scope.row.applicationTreasureGameInfoVo.version"></i>
                                    <span class="no-check" v-else @click="scope.row.selectGameInfoVo.version = scope.row.applicationTreasureGameInfoVo.version"></span>
                                </span>
                                <span class="msg-title">版本号:</span>
                                <span class="msg-desc">{{scope.row.applicationTreasureGameInfoVo.version || '/'}}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="视频"
                    width="205">
                    <template slot-scope="scope">
                        <div v-if="scope.row.videoList && scope.row.videoList.length">
                            <el-checkbox-group v-model="scope.row._videoCheckList" @change="videoCheckchange($event, scope.row)">
                                <div v-for="(item, index) in scope.row.videoList" :key="index">
                                    <div v-show="index <= 3" class="video-box">
                                        <div class="video-flex-box">
                                            <el-checkbox :label="index"><span></span></el-checkbox>
                                            <videoBox :url="item.videoUrl" :img="item.videoCover" :time="item.videoDuration"/>
                                        </div>
                                        <div @click="showVideoEditor(item, index, scope.row)" class="video-edit-btn"><span>编辑</span></div>
                                        <div class="video-type video-type-official" v-if="item.official">官方</div>
                                        <div class="video-type video-type-user" v-else>用户</div>
                                    </div>
                                </div>
                            </el-checkbox-group>
                            <el-checkbox :indeterminate="scope.row._videoIsIndeterminate" v-model="scope.row._videoCheckAll" @change="videohandleCheckAllChange($event, scope.row)">全选(已选中{{scope.row._videoCheckList.length}}条)</el-checkbox>
                            <div class="watch-more" v-if="scope.row.videoList.length > 5"><span @click="showVideo(scope.row)">共{{scope.row.videoList.length}}条，查看更多</span></div>
                        </div>
                        <div v-else style="text-align:center;">没有视频资源呢</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="图片"
                    width="205">
                    <template slot-scope="scope">
                        <div v-if="scope.row.gameImageList && scope.row.gameImageList.length">
                            <el-checkbox-group v-model="scope.row._imgCheckList" @change="imgCheckchange($event, scope.row)">
                                <div v-for="(item, index) in scope.row.gameImageList" :key="index">
                                    <div v-show="index <= 3" class="img-box">
                                        <el-checkbox :label="index"><span></span></el-checkbox>
                                        <div class="img-items" @click="showImgList(index, scope.row)">
                                            <img :src="item.imageUrl" alt="">
                                            <div class="px-box" v-if="item.width && item.height">{{item.width}}x{{item.height}}</div>
                                        </div>
                                    </div>
                                </div>
                            </el-checkbox-group>
                            <el-checkbox :indeterminate="scope.row._imgIsIndeterminate" v-model="scope.row._imgCheckAll" @change="imghandleCheckAllChange($event, scope.row)">全选(已选中{{scope.row._imgCheckList.length}}条)</el-checkbox>
                            <div class="watch-more" v-if="scope.row.gameImageList.length > 5"><span @click="showImg(scope.row)">共{{scope.row.gameImageList.length}}条，查看更多</span></div>
                        </div>
                        <div v-else style="text-align:center;">没有图片资源呢</div>
                    </template>
                </el-table-column>
                <el-table-column
                    min-width="140"
                    label="状态">
                    <template slot-scope="scope">
                        <div style="color: #F56C6C;" v-if="scope.row.applicationTreasureSelectStatus === 0">未匹配到应用宝游戏</div>
                        <div style="color:#67C23A;" v-else>已匹配到应用宝游戏</div>
                        <div v-if="!scope.row.selectGameInfoVo.gameName">缺少游戏名称</div>
                        <div v-if="!scope.row.selectGameInfoVo.gameIcon">缺少游戏icon</div>
                        <div v-if="!scope.row.selectGameInfoVo.gameIcon">缺少游戏icon</div>
                        <div v-if="!scope.row.selectGameInfoVo.apk">缺少游戏apk</div>
                        <div v-if="!scope.row.selectGameInfoVo.gameTitle">缺少游戏标题</div>
                        <div v-if="!scope.row.selectGameInfoVo.gameCategory">缺少游戏类型</div>
                        <div v-if="!scope.row.selectGameInfoVo.label">缺少tag</div>
                        <div v-if="!scope.row.selectGameInfoVo.gameIntroduce">缺少游戏简介</div>
                        <div v-if="!scope.row.selectGameInfoVo.gameLength">缺少游戏大小</div>
                        <div v-if="!scope.row.selectGameInfoVo.gameFirm">缺少游戏厂商'</div>
                        <div v-if="!scope.row.selectGameInfoVo.gameCharges">缺少游戏资费</div>
                        <div v-if="!scope.row.selectGameInfoVo.applyRating">缺少应用分级</div>
                        <div v-if="!scope.row.selectGameInfoVo.gameScore">缺少游戏评分</div>
                        <div v-if="!scope.row.selectGameInfoVo.gameLanguage">缺少语言</div>
                        <div v-if="!scope.row.selectGameInfoVo.updateTime">缺少更新时间</div>
                        <div v-if="!scope.row.selectGameInfoVo.systemRequire">缺少系统需求</div>
                        <div v-if="!scope.row.selectGameInfoVo.version">缺少版本号</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="btn-box" v-if="tableData && tableData.length">
            <el-button type="primary" @click="importGameInit" :disabled="selectList.length === 0" style="width:500px;" size="small">导入{{selectList.length}}个游戏</el-button>
        </div>

        <!-- :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false" -->
        <!-- 编辑apk -->
        <el-dialog
            title="编辑apk"
            width="500px"
            class="editor-dialog"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            :visible.sync="showApk">
            <el-input
                type="text"
                placeholder="请输入apk"
                v-model="apk"
                >
            </el-input>
            <span slot="footer">
                <el-button @click="showApk = false">取 消</el-button>
                <el-button type="primary" @click="editApkOk">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑package -->
        <el-dialog
            title="编辑package"
            width="500px"
            class="editor-dialog"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            :visible.sync="showPackageName">
            <el-input
                type="text"
                placeholder="请输入package"
                v-model="packageName"
                >
            </el-input>
            <span slot="footer">
                <el-button @click="showPackageName = false">取 消</el-button>
                <el-button type="primary" @click="editPackageNameOk">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑标题 -->
        <el-dialog
            title="编辑标题"
            width="500px"
            class="editor-dialog"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            :visible.sync="showTitle">
            <el-input
                type="text"
                placeholder="请输入标题"
                v-model="title"
                maxlength="16"
                show-word-limit
                >
            </el-input>
            <span slot="footer">
                <el-button @click="showTitle = false">取 消</el-button>
                <el-button type="primary" @click="editTitleOk">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑简介 -->
        <el-dialog
            title="编辑简介"
            width="500px"
            class="editor-dialog"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            :visible.sync="showDesc">
            <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 10}"
                placeholder="请输入内容"
                v-model="title">
            </el-input>
            <span slot="footer">
                <el-button @click="showDesc = false">取 消</el-button>
                <el-button type="primary" @click="editDescOk">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑标签 -->
        <el-dialog
            title="编辑标签"
            width="500px"
            class="editor-dialog"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            :visible.sync="showTag">
            <el-tag
                :key="tag"
                v-for="tag in tags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
            </el-tag>
            <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model.trim="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
                >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
            <span slot="footer">
                <el-button @click="showTag = false">取 消</el-button>
                <el-button type="primary" @click="editTagOk">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 查看视频 -->
        <el-dialog
            title="查看视频"
            width="900px"
            class="video-dialog"
            :visible.sync="showAllVideo">
            <div class="video-list-box">
                <el-checkbox-group v-model="currentItem._videoCheckList" @change="videoCheckchange($event, currentItem)">
                    <div class="video-box">
                        <div class="video-items" v-for="(item, index) in currentItem.videoList" :key="index">
                            <videoBox :url="item.videoUrl" :img="item.videoCover" :time="item.videoDuration"/>
                            <div class="video-title">
                                <span class="title-official" v-if="item.official">官方</span>
                                <span class="title-user" v-else>用户</span>
                                <span>{{item.videoTitle}}</span>
                            </div>
                            <div class="video-tools">
                                <el-checkbox :label="index"><span></span></el-checkbox>
                                <span class="video-editor-btn" @click="showVideoEditor(item, index)">编辑</span>
                            </div>
                        </div>
                    </div>
                </el-checkbox-group>
                <el-checkbox :indeterminate="currentItem._videoIsIndeterminate" v-model="currentItem._videoCheckAll" @change="videohandleCheckAllChange($event, currentItem)">全选(已选中{{currentItem._videoCheckList.length}}条)</el-checkbox>
            </div>
        </el-dialog>

        <!-- 查看图片 -->
        <el-dialog
            title="查看图片"
            class="img-list-box"
            width="900px"
            :visible.sync="showAllImg">
                <el-checkbox-group v-model="currentItem._imgCheckList" @change="imgCheckchange($event, currentItem)">
                    <div class="dialog-img-box">
                        <div class="img-item" v-for="(item, index) in currentItem.gameImageList" :key="index">
                            <div class="show-box" @click="showImgList(index, currentItem)">
                                <img :src="item.imageUrl" alt="" class="img">
                                <div class="px-box" v-if="item.width && item.height">{{item.width}}x{{item.height}}</div>
                            </div>
                            <el-checkbox :label="index"><span></span></el-checkbox>
                        </div>
                    </div>
                </el-checkbox-group>
                <el-checkbox :indeterminate="currentItem._imgIsIndeterminate" v-model="currentItem._imgCheckAll" @change="imghandleCheckAllChange($event, currentItem)">全选(已选中{{currentItem._videoCheckList.length}}条)</el-checkbox>
        </el-dialog>

        <!-- 编辑视频 -->
        <el-dialog
            title="编辑视频"
            class="img-list-box"
            :fullscreen="true"
            :visible.sync="isShowVideoEditor">
            <editVideo :data="currentVideoItem" :userList="userList" v-if="isShowVideoEditor" @nosave="noSaveVideo" @save="saveVideo"/>
        </el-dialog>

        <!-- 查看所有图片 -->
        <div class="img-list-dialog" v-if="imgListDialog" @click="imgListDialog = false">
            <img :src="currentImg" alt="">
            <div class="left" v-if="currentIndex !== 0" @click.stop="imgListGoLeft">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="right" v-if="currentIndex < currentItem.gameImageList.length -1" @click.stop="imgListGoRight">
                <i class="el-icon-arrow-right"></i>
            </div>
        </div>
    </div>
</template>

<script>
import editVideo from './editorVideo'
import { formatDate } from '@/utils/utils'
export default {
    data () {
        return {
            tableData: [],
            total: 0,
            pageNum: 1,
            pageSize: 10,
            showAllVideo: false,
            showAllImg: false,
            imgListDialog: false,
            loading: false,
            currentIndex: 0,
            currentImageList: [], // 图片预览数组
            currentItem: {
                videoList: [],
                gameImageList: [],
                _videoCheckList: [],
                _videoCheckAll: false,
                _videoIsIndeterminate: false,
                _imgCheckList: [],
                _imgCheckAll: false,
                _imgIsIndeterminate: false
            },
            selectList: [], // 表格选中的数据
            showApk: false,
            showPackageName: false,
            showTitle: false,
            showDesc: false,
            showTag: false,
            tags: [], // 编辑标签
            inputVisible: false,
            inputValue: '',
            title: '', // 编辑标题，简介
            apk: '', // 编辑apk
            packageName: '',
            isShowVideoEditor: false, // 显示视频编辑
            currentVideoItem: {}, // 视频对象
            userList: [],
            userId: '', // 选中的运营账号
            gameTypeList: []
        }
    },
    props: ['data', 'type'],
    created () {
        this.getGameTypeList()
        this.getUserList()
        let data = JSON.parse(JSON.stringify(this.data.gameCollectResultVoList))
        data.forEach((row, rowIndex) => {
            let allVideo = []
            let allImg = []
            let time = new Date()
            row.videoList = row.videoList || []
            row.gameImageList = row.gameImageList || []
            row.videoList.forEach((item, index) => {
                allVideo.push(index)
                if (item.publishTime) {
                    item.publishTime = item.publishTime + ''
                    item.publishTime = item.publishTime.padEnd(13, '0')
                    item.publishTime = formatDate(new Date(item.publishTime - 0), 'YYYY-MM-DD')
                } else {
                    item.publishTime = formatDate(time, 'YYYY-MM-DD')
                }
            })
            row.gameImageList.forEach((item, index) => {
                allImg.push(index)
            })
            if (row.selectGameInfoVo.gameCategory) {
                row.selectGameInfoVo.gameCategory = row.selectGameInfoVo.gameCategory.split(',')
            } else {
                row.selectGameInfoVo.gameCategory = []
            }
            if (this.type === 'taptap') {
                row.selectGameInfoVo.apk = row.applicationTreasureGameInfoVo.apk
                row.selectGameInfoVo.packageName = row.selectGameInfoVo.packageName || row.applicationTreasureGameInfoVo.packageName
                row.selectGameInfoVo.gameName = row.selectGameInfoVo.gameName || row.applicationTreasureGameInfoVo.gameName
                row.selectGameInfoVo.gameTitle = row.selectGameInfoVo.gameTitle || row.applicationTreasureGameInfoVo.gameTitle
                // row.selectGameInfoVo.gameCategory = row.selectGameInfoVo.gameCategory || row.applicationTreasureGameInfoVo.gameCategory
                row.selectGameInfoVo.label = row.selectGameInfoVo.label || row.applicationTreasureGameInfoVo.label
                row.selectGameInfoVo.gameIntroduce = row.selectGameInfoVo.gameIntroduce || row.applicationTreasureGameInfoVo.gameIntroduce
                row.selectGameInfoVo.gameLength = row.selectGameInfoVo.gameLength || row.applicationTreasureGameInfoVo.gameLength
                row.selectGameInfoVo.gameFirm = row.selectGameInfoVo.gameFirm || row.applicationTreasureGameInfoVo.gameFirm
                row.selectGameInfoVo.gameCharges = row.selectGameInfoVo.gameCharges || row.applicationTreasureGameInfoVo.gameCharges
                row.selectGameInfoVo.applyRating = row.selectGameInfoVo.applyRating || row.applicationTreasureGameInfoVo.applyRating
                row.selectGameInfoVo.gameScore = row.selectGameInfoVo.gameScore || row.applicationTreasureGameInfoVo.gameScore
                row.selectGameInfoVo.gameLanguage = row.selectGameInfoVo.gameLanguage || row.applicationTreasureGameInfoVo.gameLanguage
                row.selectGameInfoVo.updateTime = row.selectGameInfoVo.updateTime || row.applicationTreasureGameInfoVo.updateTime
                row.selectGameInfoVo.systemRequire = row.selectGameInfoVo.systemRequire || row.applicationTreasureGameInfoVo.systemRequire
                row.selectGameInfoVo.version = row.selectGameInfoVo.version || row.applicationTreasureGameInfoVo.version
            }
            row._videoCheckList = allVideo
            row._videoCheckAll = true
            row._videoIsIndeterminate = false
            row._imgCheckList = allImg
            row._imgCheckAll = true
            row._imgIsIndeterminate = false
            row._index = rowIndex
        })
        this.tableData = data
    },
    mounted () {
        this.tableData.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
        })
        this.selectList = this.tableData
    },

    methods: {

        // 获取类型列表
        async getGameTypeList () {
            let res = await this.$http.post('/game/findGameCategories')
            this.gameTypeList = res.data || []
        },
        async getUserList () {
            let res = await this.$http.get('/spider/selectGameUser')
            if (res.code === '0') {
                this.userList = res.data
            }
        },

        // 选择运营账号
        selectChange (val) {
            let userName
            this.userList.forEach(item => {
                if (item.id === val) {
                    userName = item.userName
                }
            })
            this.tableData.forEach(item => {
                item.videoList.forEach(video => {
                    video.userId = val
                    video.userName = userName
                })
            })
        },

        tableSelect (select) {
            this.selectList = select
        },

        tableSelectItme (select, row) {
            // 如果是取消勾中
            if (select.length < this.selectList.length) {
                row._videoCheckList = []
                row._videoCheckAll = false
                row._videoIsIndeterminate = false
                row._imgCheckList = []
                row._imgCheckAll = false
                row._imgIsIndeterminate = false
            // 如果选择勾中
            } else {
                let allVideo = []
                let allImg = []
                row.videoList.forEach((item, index) => {
                    allVideo.push(index)
                })
                row.gameImageList.forEach((item, index) => {
                    allImg.push(index)
                })
                row._videoCheckList = allVideo
                row._videoCheckAll = true
                row._imgCheckList = allImg
                row._imgCheckAll = true
            }
            this.selectList = select
        },

        handleSelectionChange (val) {
        },

        // 选择部分视频
        videoCheckchange (val, item) {
            let checkedCount = val.length
            if (checkedCount) {
                let flag = false
                this.selectList.forEach(selectItem => {
                    if (item._index === selectItem._index) {
                        flag = true
                    }
                })
                if (!flag) {
                    this.$refs.multipleTable.toggleRowSelection(item)
                    this.selectList.push(item)
                }
            }
            item._videoCheckAll = checkedCount === item.videoList.length
            item._videoIsIndeterminate = checkedCount > 0 && checkedCount < item.videoList.length
        },

        // 视频全选
        videohandleCheckAllChange (val, item) {
            let all = []
            item.videoList.forEach((item, index) => {
                all.push(index)
            })
            item._videoCheckList = val ? all : []
            item._videoIsIndeterminate = false
        },

        // 选择部分图片
        imgCheckchange (val, item) {
            let checkedCount = val.length
            if (checkedCount) {
                let flag = false
                this.selectList.forEach(selectItem => {
                    if (item._index === selectItem._index) {
                        flag = true
                    }
                })
                if (!flag) {
                    this.$refs.multipleTable.toggleRowSelection(item)
                    this.selectList.push(item)
                }
            }
            item._imgCheckAll = checkedCount === item.gameImageList.length
            item._imgIsIndeterminate = checkedCount > 0 && checkedCount < item.gameImageList.length
        },

        // 图片全选
        imghandleCheckAllChange (val, item) {
            let all = []
            item.gameImageList.forEach((item, index) => {
                all.push(index)
            })
            item._imgCheckList = val ? all : []
            item._imgIsIndeterminate = false
        },

        // 查看全部视频
        showVideo (item) {
            this.currentItem = item
            this.showAllVideo = true
        },

        // 查看全部图片
        showImg (item) {
            this.currentItem = item
            this.showAllImg = true
        },

        showImgList (index, item) {
            this.currentIndex = index
            this.currentItem = item
            console.log(item)
            this.imgListDialog = true
        },

        imgListGoRight () {
            this.currentIndex++
        },

        imgListGoLeft () {
            this.currentIndex--
        },

        // 查看视频详情
        goVideoDetail (id) {
            if (id) {
                this.$router.push({
                    path: '/video/videoDetail',
                    query: {
                        id
                    }
                })
            } else {
                this.$router.push('/video/videoDetail')
            }
        },

        // 编辑APK
        editApk (item) {
            this.currentItem = item
            this.apk = this.currentItem.selectGameInfoVo.apk
            this.showApk = true
        },

        editApkOk () {
            this.currentItem.selectGameInfoVo.apk = this.apk
            this.showApk = false
        },

        // 编辑APK
        editPackageName (item) {
            this.currentItem = item
            this.packageName = this.currentItem.selectGameInfoVo.packageName
            this.showPackageName = true
        },

        editPackageNameOk () {
            this.currentItem.selectGameInfoVo.packageName = this.packageName
            this.showPackageName = false
        },

        // 编辑标题
        editTitle (item) {
            this.currentItem = item
            this.title = this.currentItem.selectGameInfoVo.gameTitle
            this.showTitle = true
        },

        editTitleOk () {
            this.currentItem.selectGameInfoVo.gameTitle = this.title
            this.showTitle = false
        },

        // 编辑标签
        editTag (item) {
            this.currentItem = item
            this.tags = this.currentItem.selectGameInfoVo.label
            this.showTag = true
        },

        editTagOk () {
            this.currentItem.selectGameInfoVo.label = this.tags
            this.showTag = false
        },

        handleClose (tag) {
            this.tags.splice(this.tags.indexOf(tag), 1)
        },

        showInput () {
            this.inputVisible = true
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus()
            })
        },

        handleInputConfirm () {
            let inputValue = this.inputValue
            if (inputValue) {
                this.tags.push(inputValue)
            }
            this.inputVisible = false
            this.inputValue = ''
        },

        // 编辑简介
        editDesc (item) {
            this.currentItem = item
            this.title = this.currentItem.selectGameInfoVo.gameIntroduce
            this.showDesc = true
        },

        editDescOk () {
            this.currentItem.selectGameInfoVo.gameIntroduce = this.title
            this.showDesc = false
        },

        // 导入前初始化数据
        importGameInit () {
            if (this.loading) return
            this.loading = true
            this._flag = false
            let list = JSON.parse(JSON.stringify(this.selectList))
            list.forEach((item, index) => {
                let videoList = []
                let gameImageList = []

                item._videoCheckList.forEach(index => {
                    videoList.push(item.videoList[index])
                })
                item._imgCheckList.forEach(index => {
                    gameImageList.push(item.gameImageList[index])
                })
                item.videoList = videoList
                item.gameImageList = gameImageList
                item.selectGameInfoVo.gameCategory = item.selectGameInfoVo.gameCategory.join()
                if (!item.selectGameInfoVo.packageName) {
                    this._message = `请为第${index + 1}个游戏（${item.selectGameInfoVo.gameName}）选择package！`
                    this._flag = true
                }
                delete item._videoCheckList
                delete item._videoCheckAll
                delete item._videoIsIndeterminate
                delete item._imgCheckList
                delete item._imgCheckAll
                delete item._imgIsIndeterminate
                delete item._index
            })
            if (this._flag) {
                this.$message({
                    type: 'error',
                    message: this._message
                })
                return
            }
            this.gameInfoInsert(list)
        },

        // 导入游戏
        async gameInfoInsert (list) {
            if (!this.userId) {
                this.$message({
                    type: 'error',
                    message: '请选择运营账号！再导入！'
                })
                return
            }
            let params = JSON.parse(JSON.stringify(this.data))
            params.gameInfoInsertRequestVoList = list
            delete params.gameCollectResultVoList
            let res = await this.$http.post('/spider/gameInfoInsert', params)
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '导入成功！'
                })
                this.$emit('close')
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 显示编辑视频
        showVideoEditor (item, index, currentItem) {
            if (currentItem) {
                this.currentItem = currentItem
            }
            this.currentVideoIndex = index
            this.currentVideoItem = item
            this.isShowVideoEditor = true
        },
        saveVideo () {
            if (this.currentItem._videoCheckList.indexOf(this.currentVideoIndex) === -1) {
                this.currentItem._videoCheckList.push(this.currentVideoIndex)
                // if (this.currentItem._videoCheckList.length === this.currentItem.videoList.length) {
                //     this.currentItem._videoCheckAll = true
                // } else {
                //     this.currentItem._videoCheckAll = false
                // }
                this.currentItem._videoCheckAll = this.currentItem._videoCheckList.length === this.currentItem.videoList.length
                this.currentItem._videoIsIndeterminate = this.currentItem._videoCheckList.length !== this.currentItem.videoList.length
            }
            this.isShowVideoEditor = false
        },

        noSaveVideo () {
            let index = this.currentItem._videoCheckList.indexOf(this.currentVideoIndex)
            if (index !== -1) {
                this.currentItem._videoCheckList.splice(index, 1)
                // if (!this.currentItem._videoCheckList.length) {
                //     this.currentItem._videoCheckAll = false
                // }
                this.currentItem._videoCheckAll = this.currentItem._videoCheckList.length === this.currentItem.videoList.length
                this.currentItem._videoIsIndeterminate = this.currentItem._videoCheckList.length !== 0
            }
            this.isShowVideoEditor = false
        }
    },

    computed: {
        currentImg () {
            // return ''
            return this.currentItem.gameImageList[this.currentIndex].imageUrl
        }
    },

    components: {
        editVideo
    }
}
</script>

<style lang="scss" scoped>
    .check-data {
        font-size: 14px;
        .title {
            text-align: center;
        }
        .user-select-box  {
            display: flex;
            align-items: center;
        }
        .input-box {
            .btn {
                margin-left: 10px;
            }
        }
        .table-box {
            margin: 20px 0;
            .msg-box {
                > div {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                }
                .msg-icon {
                    width: 80px;
                    height: 80px;
                    margin: 0 auto;
                    > img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .msg-title {
                    font-weight: 500;
                    color: #000000;
                    margin-right: 5px;
                }
                .msg-edit {
                    color: #409EFF;
                    margin-right: 5px;
                    cursor: pointer;
                }
                .msg-check {
                    .is-check {
                        color: green;
                        margin-right: 5px;
                    }
                    .no-check {
                        margin-right: 5px;
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        border: 1px  solid #000000;
                        cursor: pointer;
                        &:hover {
                            border-color: #409EFF;
                        }
                    }
                }
            }
            .video-box {
                margin-bottom: 10px;
                position: relative;
                top: 0;
                left: 0;
                z-index: 1;
            }
            .video-edit-btn {
                position: absolute;
                top: 0;
                right: 0;
                z-index: 1;
                color: #ffffff;
                font-size: 12px;
                cursor: pointer;
                width: 40px;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .video-type {
                position: absolute;
                top: 0;
                left: 22px;
                z-index: 1;
                font-size: 12px;
                cursor: pointer;
                width: 40px;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .video-type-official {
                color: #F56C6C;
            }
            .video-type-user {
                color: #67C23A;
            }
            .video-flex-box {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .img-box {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 10px;
                // height: 80px;
                cursor: pointer;
                .img-items {
                    position: relative;
                    top: 0;
                    left: 0;
                    z-index: 1;
                    width: 160px;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    &:hover {
                        background-color: rgba(0, 0, 0, .1);
                        > img {
                            opacity: .4;
                        }
                    }
                    > img {
                        max-width: 100%;
                        max-height: 100%;
                    }
                    .px-box {
                        position: absolute;
                        font-size: 12px;
                        right: 0;
                        bottom: 0;
                        // transform: translateX(-50%);
                        color: #000000;
                    }
                }
            }

            .watch-more {
                color: #409EFF;
                text-align: center;
                > span {
                    cursor: pointer;
                    &:hover {
                        opacity: .8;
                        text-decoration: underline;
                    }
                }
            }
        }

        .btn-box {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }

        .video-dialog {
            /deep/ .el-dialog__body {
                padding-top: 0;
            }
            .video-list-box {
                .video-box {
                    min-height: 324px;
                    max-height: 380px;
                    overflow: scroll;
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 10px;
                    .video-items {
                        padding: 5px;
                        padding-top: 10px;
                        max-height: 162px;
                        &:hover {
                            background-color: #eeeeee;
                        }
                        .video-title {
                            margin-top: 4px;
                            font-size: 12px;
                            overflow: hidden;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            display: -webkit-box;
                            width: 160px;
                            height: 35px;
                            word-break: break-all;
                            .title-official {
                                color: #F56C6C;
                                margin-right: 5px;
                            }

                            .title-user {
                                color: #67C23A;
                                margin-right: 5px;
                            }
                        }
                        .video-tools {
                            display: flex;
                            justify-content: space-between;
                            .video-editor-btn {
                                color: #409EFF;
                                font-size: 13px;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }

        .img-list-box {
            /deep/ .el-dialog__body {
                padding-top: 0;
            }
            .dialog-img-box {
                min-height: 330px;
                max-height: 380px;
                overflow: scroll;
                display: flex;
                flex-wrap: wrap;
                .img-item {
                    padding: 5px;
                    padding-top: 10px;
                    .show-box {
                        position: relative;
                        top: 0;
                        left: 0;
                        z-index: 1;
                        width: 160px;
                        height: 80px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        &:hover {
                            background-color: rgba(0, 0, 0, .1);
                            > img {
                                opacity: .4;
                            }
                        }
                        > img {
                            max-width: 100%;
                            max-height: 100%;
                        }
                        .px-box {
                            position: absolute;
                            font-size: 12px;
                            right: 0;
                            bottom: 0;
                            color: #000000;
                        }
                    }
                    .img-btn {
                        margin-top: 10px;
                        display: flex;
                        justify-content: center;
                    }
                }
            }
        }

        .img-list-dialog {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10000;
            overflow: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, .3);
            > img {
                max-width: 100%;
                max-height: 80vh;
            }
            .left, .right {
                position: absolute;
                top: 50%;
                z-index: 1;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: #606266;
                transform: translateY(-50%);
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                font-size: 24px;
                &:hover {
                    opacity: .8;
                }
            }

            .left {
                left: 50px;
            }

            .right {
                right: 50px;
            }
        }

        .editor-dialog {
            /deep/ .el-dialog__body {
                padding-top: 0;
                padding-bottom: 0;
            }
            .el-tag {
                margin-right: 10px;
                margin-top: 10px;
            }
            .button-new-tag {
                margin-top: 10px;
                height: 32px;
                line-height: 30px;
                padding-top: 0;
                padding-bottom: 0;
            }
            .input-new-tag {
                margin-top: 10px;
                width: 90px;
                vertical-align: bottom;
            }
        }
    }
</style>
